<div class="layout-sub-page">
    <nz-divider nzText="基本信息" nzOrientation="left"></nz-divider>
    <span nz-row nzJustify="center" nzGutter='24' style='text-align: center;line-height: 30px;font-size: 16px; font-weight: 800;'>
        <span nz-col nzSpan='4'>用户昵称:</span>
        <input nz-input nz-col nzSpan='4' [(ngModel)]='user.nickName' [disabled]='true'>
        <span nz-col nzSpan='4'>登录账号:</span>
        <input nz-input nz-col nzSpan='4' [(ngModel)]='user.userName' [disabled]='true'>
    </span>
    <nz-divider nzText="角色信息" nzOrientation="left"></nz-divider>
    <div style='height: 400px; max-height: 400px'>
        <nz-table
          #rowSelectionTable
          [nzData]="roles"
          [nzShowPagination]='false'
        >
          <thead>
            <tr>
              <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)"></th>
              <th>角色编号</th>
              <th>角色名称</th>
              <th>权限字符</th>
              <th>创建时间</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of rowSelectionTable.data">
              <td
                [nzChecked]="setOfCheckedId.has(data.roleId)"
                [nzDisabled]="data.disabled"
                (nzCheckedChange)="onItemChecked(data.roleId, $event)"
              ></td>
              <td>{{ data.roleId }}</td>
              <td>{{ data.roleName }}</td>
              <td>{{ data.roleKey }}</td>
              <td>{{ data.createTime }}</td>
            </tr>
          </tbody>
        </nz-table>

    </div>
    <div class="send-request">
      <button
        nz-button
        nzType="primary"
        [disabled]="setOfCheckedId.size === 0"
        [nzLoading]="loading"
        (click)="sendRequest()"
      >
        提交
      </button>
  <span>已经选择了 {{ setOfCheckedId.size }} 项</span>
</div>
</div>
